<template>
  <div class="goods-container">
    <!-- 顶部大图 -->
    <div class="top-banner">
      <van-image :src="this.big_pic" class="pic0" fit="contain"> </van-image>
    </div>
    <!-- 精品店列表 -->
    <div class="goods">
      <a class="tit">
        <span>精品店</span>
        <i class="iconfont icon-rightarrow"></i>
      </a>
      <!-- 商品列表 -->
      <van-grid :border="false" :column-num="2" class="goods-list">
        <van-grid-item v-for="item in list" :key="item.id">
          <van-image :src="item.image" class="pic" />
          <van-cell class="msg">
            <span class="l-txt" slot="title">{{ item.name }}</span>
            <span class="s-txt" slot="label">{{ item.description }}</span>
          </van-cell>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getUserChoicenesslist } from '@/api/home.js' // 引入主页相关ajax
export default {
  name: 'goodslist',
  // 定义属性
  data() {
    return {
      list: [],
      big_pic: ''
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getlist() {
      const res = await getUserChoicenesslist()
      console.log(res)
      const items = res.data
      this.big_pic = items.splice(0, 1)[0].big_image
      items.splice(0, 1)
      this.list = items
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getlist()
  }
}
</script>

<style lang="less">
.goods-container {
  overflow-y: auto; // 让其显示垂直滚动条
  height: 79vh; // 设置视口高度

  // 顶部背景图
  .pic0 {
    margin-top: 20px;
    width: 636px;
    height: 272px;
  }
  // 精品店列表
  .goods {
    // 标题
    .tit {
      margin-top: 43px;
      margin-bottom: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-family: PingFang-SC-Heavy;
        font-size: 32px;
        color: #484747;
      }
      .iconfont {
        margin-left: 15px;
        color: #a2a0a0;
        font-size: 12px;
      }
    }
    // 商品列表
    .goods-list {
      // 图片样式
      .pic {
        width: 308px;
        height: 172px;
      }
      //图片间距
      .van-grid-item__content {
        padding: unset;
      }
      .van-grid-item:nth-child(even) {
        padding-right: 45px;
      }
      .van-grid-item:nth-child(odd) {
        padding-left: 45px;
      }
      // 文字信息
      .van-cell {
        padding: 18px 0 44px 10px;
      }
      .msg {
        text-align: left;
      }
      .l-txt {
        font-family: PingFang-SC-Medium;
        font-size: 24px;
        color: #484747;
      }
      .s-txt {
        font-family: PingFang-SC-Medium;
        font-size: 20px;
        color: #9b9b9b;
      }
    }
  }
}
</style>
